<template>
  <section class="container">
    <ul class="media-list">
      <li class="media" v-for="item in topics">
        <div class="media-left">
          <a href="#">
              <img width="40" height="40" class="media-object" src="src/assets/img/avatar-max-img.png" alt="...">
            </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading"><router-link :to="{ name: 'user', params: { id: item.id }}">{{ item.title }}</router-link></h4>
          <p>sueysok 回复了问题 • 2 人关注 • 1 个回复 • 187 次浏览 • 2017-10-20 13:45</p>
        </div>
      </li>
    </ul>
  <div class="block" style="margin-bottom: 30px">
  </style>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="0"
      :page-sizes="[5,4,3,2]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
  
  </section>
  </template>
<script>
  import axios from 'axios'
  export default {
    data () {
      return {
        topics: [],
        total: 0,
        page: 1,
        pagesize: 5,
      }
    },
    created () {
      this.listShow(this.page, this.pagesize)
    },
    methods: {
      // TODO: 差数据倒叙排序
      async listShow (page, limit) {
        const {data} = await axios.get(`/api/topics?_page=${page}&_limit=${limit}`)
        this.topics = data.list
        this.total = data.count.count

      },
      handleSizeChange(val) {
        this.pagesize = val
        this.listShow(this.page, this.pagesize)
      },
      handleCurrentChange(val) {
        this.page = val
        this.listShow (this.page, this.pagesize)
      },
    }
  }
</script>


<style>
  
</style>

